<script>
// 服饰列表
import AddAction from "@/views/aihuman/HumanAssets/actionType/AddAction.vue";
import {changeDressStatus, deleteExpression, getDressPageList} from "@/api/aihuman/humanAssets/dress";
import AddDress from "@/views/aihuman/HumanAssets/dress/AddDress.vue";
import {mapGetters} from "vuex";
import EmptyData from "@/components/aihuman/EmptyData/index.vue";
import {getUrl} from "@/util/aihuman/getUrl";

export default {
  name: "DressContainer",
  components: {EmptyData, AddDress, AddAction},
  data() {
    return {
      loading: false,
      searchForm: {
        packageId: '',
        costumesName: '',
        costumesCode: '',
      },
      groupId: '',
      // 数字人类型
      type: '',
      searchFieldList: [
        {
          prop: 'costumesName',
          placeholder: '请输入服饰名称'
        },
        {
          prop: 'costumesCode',
          placeholder: '请输入服饰id'
        },
      ],
      paging: {
        pageNo: 1,
        pageSize: 12,
        total: 0
      },
      list: [],
      selectedList: [],
      isShowCheck: false

    }

  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addPackBtn: this.vaildData(this.permission[`assets-dress-addpack`], false),
        editPackBtn: this.vaildData(this.permission[`assets-dress-editpack`], false),
        enablePackBtn: this.vaildData(this.permission['assets-dress-statuspack'], false),
        deletePackBtn: this.vaildData(this.permission['assets-dress-deletepack'], false),
        addBtn: this.vaildData(this.permission['assets-dress-add'], false),
        editBtn: this.vaildData(this.permission['assets-dress-edit'], false),
        deleteBtn: this.vaildData(this.permission['assets-dress-delete'], false),
      }
    }
  },
  methods: {
    getUrl,
    editAction(item) {
      this.$refs.addDress.open('edit', this.groupId, item)
    },
    previewAction(item) {
      this.$refs.addDress.open('preview', this.groupId, item)
    },
    addDress(item) {
      this.$refs.addDress.open('add', this.groupId, {packageId: this.searchForm.packageId, costumesType: this.type})
    },
    async toggleAction(row) {
      const {data} = await changeDressStatus({id: row.id, status: row.status ^ 1})
      this.$message.success(data.msg)
      this.getList()
    },
    removeItem(item) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let ids = [item.id]

        let params = {
          ids: ids.join(",")
        }
        const {data} = await deleteExpression(params)
        this.$message({
          type: 'success',
          message: data.msg
        })
        this.getList()
      });
    },
    async batchRemove() {
      this.selectedList = this.list.filter(item => item.checked)
      if (this.selectedList.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择需要处理的数据",
        });
        return false
      }

      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let ids = this.selectedList.map(item => item.id)

        let params = {
          ids: ids.join(",")
        }
        const {data} = await deleteExpression(params)
        this.$message({
          type: 'success',
          message: data.msg
        })
        this.selectedList = []
        this.getList()
      });

    },
    searchFn() {
      console.log(this.searchForm);
      this.paging.pageNo = 1
      this.getList()
    },
    getList() {
      this.$nextTick(async () => {
        this.loading = true
        const {data} = await getDressPageList({...this.paging, ...this.searchForm})
        this.list = data.data.records.map(item => {
          return {
            ...item,
            checked: false
          }
        })
        this.paging.total = data.data.total
        this.loading = false
      })
    },
    batchSet() {
      this.isShowCheck = !this.isShowCheck
      if (this.isShowCheck === false) {
        this.list.forEach(item => {
          item.checked = false
        })
      }
    },
    selectAll() {
      this.list.forEach(item => {
        item.checked = true
      })
    }
  }
}
</script>

<template>
  <div class="action-container">
    <div class="btn-block">
      <el-button v-if="permissionList.addBtn" type="success" size="small" @click="addDress">新增服饰</el-button>
      <el-button v-if="permissionList.deleteBtn" type="primary" @click="batchSet" size="small">
        {{ isShowCheck ? '取消' : '批量管理' }}
      </el-button>
      <template v-if="isShowCheck">
        <el-button type="text" @click="selectAll" size="small">全选本页</el-button>
        <el-button type="text" size="small" @click="batchRemove">批量删除</el-button>
      </template>
    </div>
    <HuilanBasicSearchbar :model="searchForm" :fields="searchFieldList" @search="searchFn" @reset="getList">

    </HuilanBasicSearchbar>

    <template v-if="paging.total > 0">

      <div class="img-list-block" v-loading="loading">
        <el-scrollbar>
          <ul>
            <li class="img-list-item" v-for="item in list" :key="item.id">
              <div :class="['img-list-item__status', {'img-list-item__status--disable': item.status === 1}]">
                {{ item.status === 0 ? '已开启' : '已停用' }}
              </div>
              <div class="img-list-item__cont">
                <div class="img-list-item__image">
                  <img
                    :src="`${getUrl()}${item.costumesVideoLink}`"
                    width="100"
                    style="transform: scale(3);margin-top: 50px;"
                    alt="">
                </div>
                <div class="img-list-item__image-info">
                  <div class="img-list-item__name">{{ item.costumesName }}</div>
                  <div class="img-list-item__metadata">
                    <div
                      :class="['img-list-item__tag', {'img-list-item__tag--green': item.costumesType === 4}]"
                    >
                      {{ item.costumesType === 3 ? 'Web3D' : 'UE3D' }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="img-list-item__footer">
                <button v-if="permissionList.editBtn" type="button" @click="editAction(item)">
                  编辑
                </button>
                <el-dropdown>
                  <div class="el-icon-more"></div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="previewAction(item)">详情</el-dropdown-item>
                    <el-dropdown-item v-if="permissionList.editBtn" @click.native="toggleAction(item)">
                      {{ item.status === 0 ? '停用' : '启用' }}
                    </el-dropdown-item>
                    <el-dropdown-item v-if="permissionList.deleteBtn" @click.native="removeItem(item)">删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>

              <el-checkbox v-if="isShowCheck" v-model="item.checked" class="checkbox-style"/>
            </li>
          </ul>
        </el-scrollbar>
      </div>

      <div class="pagination">
        <el-pagination
          background
          @size-change="getList"
          @current-change="getList"
          :current-page.sync="paging.pageNo"
          :page-sizes="[12, 24, 48, 96]"
          :page-size.sync="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total">
        </el-pagination>
      </div>
    </template>
    <empty-data v-else/>
    <add-dress
      ref="addDress"
      @save="getList"
    />
  </div>
</template>

<style scoped lang="scss">
@import "~@/styles/aihuman/aihuman-assets";
</style>
